import { addBriefing } from '@/services/api/api-monitor-briefing';
import { AudioOutlined, SendOutlined } from '@ant-design/icons';
import {
    DrawerForm,
    EditableProTable,
    ProCard,
    ProColumns,
    ProForm,
    ProFormCascader,
    ProFormDatePicker,
    ProFormDigit,
    ProFormGroup,
    ProFormList,
    ProFormSelect,
    ProFormText,
    ProFormTimePicker,
} from '@ant-design/pro-components';
import { FormListActionType } from '@ant-design/pro-form';
import { Button, Card, Cascader, Form, message } from 'antd';
import { useRef, useState } from 'react';

interface EnrollMediaProps {
    onRefurbish: () => void;
    detailRegistData: InterviewRecordData.assignOrganizationList
    id: string;
}
const AddAudioVisual: React.FC<EnrollMediaProps> = ({ onRefurbish, id, detailRegistData }) => {
    const abjcActionRef = useRef<FormListActionType<{ name: string; }>>();
    const ggjcActionRef = useRef<FormListActionType<{ name: string; }>>();
    const [dataSourceAbjc, setDataSourceAbjc] = useState([]);
    const [editableKeysAbjc, setEditableRowKeysAbjc] = useState<React.Key[]>([]);
    const [dataSourceGgjc, setDataSourceGgjc] = useState([]);
    const [editableKeysGgjc, setEditableRowKeysGgjc] = useState<React.Key[]>([]);
    const [yearOption, setYearOption] = useState([
        {
            label: '2020年', value: '2020'
        },
        {
            label: '2021年', value: '2021'
        },
        {
            label: '2022年', value: '2022'
        },
        {
            label: '2023年', value: '2023'
        },
        {
            label: '2024年', value: '2024'
        }
    ])
    const [timeOption, setTimeOption] = useState([
        {
            label: '第1期', value: '1'
        },
        {
            label: '第2期', value: '2'
        },
        {
            label: '第3期', value: '3'
        },
        {
            label: '第4期', value: '4'
        },
        {
            label: '第5期', value: '5'
        },
        {
            label: '第6期', value: '6'
        },
        {
            label: '第7期', value: '7'
        },
        {
            label: '第8期', value: '8'
        },
        {
            label: '第9期', value: '9'
        }
    ])

    const [selectTime, setSelectTime] = useState<number>(6)
    const columnsAbjc: ProColumns[] = [
        {
            title: '事故单位',
            dataIndex: 'unit',
            formItemProps: (form, { rowIndex }) => {
                return {
                    rules: [{ required: true, message: '此项为必填项' }]
                };
            },
        },
        {
            title: '事故频道',
            dataIndex: 'channel',
        },
        {
            title: '事故次数',
            key: 'count',
            dataIndex: 'count',
            valueType: 'digit',
            fieldProps: {
                style: { width: '100%' }
            }
        },
        {
            title: '事故时长',
            dataIndex: 'duration',
            valueType: 'time',
            fieldProps: {
                variant: 'outlined',
                showNow: false,
                style: { width: '100%' }
            }
        },
        {
            title: '操作',
            valueType: 'option',
            render: () => {
                return null;
            },
        },
    ];
    const columnsGgjc: ProColumns[] = [
        {
            title: '频道名称',
            dataIndex: 'channel',
            formItemProps: (form, { rowIndex }) => {
                return {
                    rules: [{ required: true, message: '此项为必填项' }]
                };
            },
        },
        {
            title: '监测日期',
            dataIndex: 'date',
            valueType: 'date',
            fieldProps: {
                style: { width: '100%' }
            }
        },
        {
            title: '商业广告超时时段（个）',
            key: 'timeout',
            dataIndex: 'timeout',
            valueType: 'digit',
            fieldProps: {
                style: { width: '100%' }
            }
        },
        {
            title: '违规播出广告（个）',
            key: 'shoppingAds',
            dataIndex: 'shoppingAds',
            valueType: 'digit',
            fieldProps: {
                style: { width: '100%' }
            }
        },
        {
            title: '违规医药广告（个）',
            key: 'medicalAds',
            dataIndex: 'medicalAds',
            valueType: 'digit',
            fieldProps: {
                style: { width: '100%' }
            }
        },
        {
            title: '合计',
            key: 'total',
            dataIndex: 'total',
            valueType: 'digit',
            fieldProps: {
                style: { width: '100%' }
            }
        },
        {
            title: '操作',
            valueType: 'option',
            render: () => {
                return null;
            },
        },
    ];

    return (
        <DrawerForm
            title="报名"
            trigger={<Button type="primary">手动录入</Button>}
            autoFocusFirstInput
            layout="horizontal"
            drawerProps={{
                destroyOnClose: true,
                width: '100%'
            }}
            onVisibleChange={(visible) => {
                if (visible) {
                } else {
                }
                onRefurbish()
            }}
            submitTimeout={2000}
            onFinish={async (values) => {
                const response = await addBriefing({
                    ...values,
                });
                if (response.code === 0) {
                    message.success('提交成功');
                    onRefurbish();
                }
                return true;
            }}
        >
            <ProForm.Group title="时间" >
                <ProFormSelect
                    name="year"
                    placeholder="选择年限"
                    fieldProps={{
                        options: yearOption,
                        style: {
                            width: 300
                        },
                        removeIcon: true,
                        allowClear: true,
                        showSearch: true,
                        maxTagCount: 'responsive',
                    }}
                />
                <ProFormSelect
                    name="time"
                    placeholder="选择期数"
                    fieldProps={{
                        options: timeOption,
                        style: {
                            width: 300
                        },
                        removeIcon: true,
                        allowClear: true,
                        showSearch: true,
                        maxTagCount: 'responsive',

                    }}
                />

            </ProForm.Group>
            <Card title="安播监测" >
                <ProForm.Group >
                    <ProFormSelect
                        label="月份"
                        name="month"
                        valueEnum={{
                            1: '一月',
                            2: '二月',
                            3: '三月',
                            4: '四月',
                            5: '五月',
                            6: '六月',
                            7: "七月",
                            8: '八月',
                            9: '九月',
                            10: '十月',
                            11: '十一月',
                            12: '十二月'
                        }}
                        rules={[{ required: true, message: '请输入月份' }]}
                    />
                    <ProFormDigit
                        name="stopIncidentCount"
                        label="停播事故次数"
                    // rules={[{ required: true, message: '请输入停播事故次数' }]}
                    />
                    <ProFormDigit
                        name="majorIncidentCount"
                        label="重大事故次数"
                    // rules={[{ required: true, message: '请输入重大事故次数' }]}
                    />
                    <ProFormTimePicker
                        name="totalStopDuration"
                        label="总停播时长"
                        // rules={[{ required: true, message: '请输入总停播时长' }]}
                        fieldProps={
                            {
                                variant: "outlined",
                                showNow: false
                            }
                        }
                    />
                    <ProFormDigit
                        name="responsibilityIncidents"
                        label="责任事故次数"
                    // rules={[{ required: true, message: '请输入责任事故次数' }]}
                    />

                    <ProFormText
                        name="technicalIncidents"
                        label="技术事故次数"
                    // rules={[{ required: true, message: '请输入技术事故次数' }]}
                    />

                    <ProFormDigit
                        name="lastMonthStopIncidentCount"
                        label="上月停播事故次数"
                    // rules={[{ required: true, message: '请输入上月停播事故次数' }]}
                    />
                    <ProFormDigit
                        name="lastMonthMajorIncidentCount"
                        label="上月重大事故次数"
                    // rules={[{ required: true, message: '请输入上月重大事故次数' }]}
                    />
                    <ProFormTimePicker
                        name="lastMonthTotalStopDuration"
                        label="上月总停播时长"
                        // rules={[{ required: true, message: '请输入上月总停播时长' }]}
                        fieldProps={
                            {
                                variant: "outlined",
                                showNow: false
                            }
                        }
                    />

                    <ProFormText
                        name="samePeriodLastYearStopIncidentCount"
                        label="去年同期停播事故次数"
                    // rules={[{ required: true, message: '请输入去年同期停播事故次数' }]}
                    />
                    <ProFormDigit
                        name="samePeriodLastYearMajorIncidentCount"
                        label="去年同期重大事故次数"
                    // rules={[{ required: true, message: '请输入去年同期重大事故次数' }]}
                    />
                    <ProFormTimePicker
                        name="samePeriodLastYearTotalStopDuration"
                        label="去年同期总停播时长"
                        fieldProps={
                            {
                                variant: "outlined",
                                showNow: false
                            }
                        }
                    // rules={[{ required: true, message: '请输入去年同期总停播时长' }]}
                    />
                    <ProFormDigit
                        name="totalChannel"
                        label="事故单位/频道数"
                    // rules={[{ required: true, message: '请输入事故单位/频道数' }]}
                    />
                    <ProFormDigit
                        name="totalCount"
                        label="总事故次数"
                    // rules={[{ required: true, message: '请输入总事故次数' }]}
                    />

                    <ProFormTimePicker
                        name="totalDuration"
                        label="总事故时长"
                        fieldProps={
                            {
                                variant: "outlined",
                                showNow: false
                            }
                        }
                    // rules={[{ required: true, message: '请输入总事故时长' }]}
                    />

                </ProForm.Group>
                {/* <EditableProTable
                    ghost
                    headerTitle="事故单位信息"
                    columns={columnsAbjc}
                    rowKey="id"
                    value={dataSourceAbjc}
                    onChange={setDataSourceAbjc}
                    recordCreatorProps={{
                        newRecordType: 'dataSource',
                        record: () => ({
                            id: Date.now(),
                        }),
                    }}
                    editable={{
                        type: 'multiple',
                        editableKeys: editableKeysAbjc,
                        actionRender: (row, config, defaultDoms) => {
                            return [defaultDoms.delete];
                        },
                        onValuesChange: (record, recordList) => {
                            setDataSourceAbjc(recordList);
                        },
                        onChange: setEditableRowKeysAbjc,
                    }}
                /> */}
                <ProFormList
                    name="incidentData"
                    actionRef={abjcActionRef}
                    // creatorButtonProps={false}
                    // label={<div style={{ display: 'flex', justifyContent: 'space-between', width: '100vw' }}>
                    //     <span style={{ fontSize: 16 }}>记者信息</span>
                    //     <Button
                    //         type="primary"
                    //         style={{ display: 'flex', justifyContent: 'flex-end' }}
                    //         onClick={() => {
                    //             repoterActionRef.current?.add({
                    //                 name: '',
                    //             });
                    //         }}
                    //     >
                    //         添加记者信息
                    //     </Button>
                    // </div>}
                    label='事故单位'
                    creatorButtonProps={{
                        creatorButtonText: '添加事故单位',
                    }}
                    initialValue={[
                        {
                            name: '',
                        },
                    ]}
                >
                    <Card style={{ marginBottom: 5 }}>
                        <ProFormGroup key="group" >
                            <ProFormText name="unit" label="事故单位" placeholder="请输入事故单位" rules={[{ required: true, message: '请输入事故单位' }]} />
                            <ProFormText
                                name="channel"
                                label="事故频道"
                                placeholder="请输入事故频道"
                            // rules={[{ required: true, message: '请输入事故频道' }]}
                            />
                            <ProFormDigit
                                name="count"
                                label="事故次数"
                            // rules={[{ required: true, message: '请输入事故次数' }]}
                            />
                            <ProFormTimePicker
                                name="duration"
                                label="事故时长"
                                fieldProps={
                                    {
                                        variant: "outlined",
                                        showNow: false
                                    }
                                }
                            // rules={[{ required: true, message: '请输入事故时长' }]}
                            />
                        </ProFormGroup>
                    </Card>
                </ProFormList>
            </Card>
            <Card title="广告监测" style={{ marginTop: 20 }}>
                <ProForm.Group >
                    <ProFormText
                        name="publicServiceAdsCount"
                        label="公益广告条数"
                    // rules={[{ required: true, message: '请输入公益广告条数' }]}
                    />
                    <ProFormText
                        name="publicServiceAdsDuration"
                        label="公益广告时长（例如：50小时10分10秒）"
                    // rules={[{ required: true, message: '请输入公益广告时长' }]}
                    />
                    <ProFormText
                        name="commercialAdsDuration"
                        label="商业广告时长（例如：50小时10分10秒）"
                    // rules={[{ required: true, message: '请输入商业广告时长' }]}
                    />
                    <ProFormDigit
                        name="violationsTotal"
                        label="违规行为总数"
                    // rules={[{ required: true, message: '请输入违规行为总数' }]}
                    />

                    <ProFormDigit
                        name="violationsShoppingAds"
                        label="违规播出电视购物短片广告数"
                    // rules={[{ required: true, message: '请输入违规播出电视购物短片广告数' }]}
                    />

                    <ProFormDigit
                        name="violationsMedicalAds"
                        label="违规医药广告数"
                    // rules={[{ required: true, message: '请输入违规医药广告数' }]}
                    />
                    <ProFormDigit
                        name="violationsCommercialTimeout"
                        label="商业广告超时播出时段数"
                    // rules={[{ required: true, message: '请输入商业广告超时播出时段数' }]}
                    />
                </ProForm.Group>
                {/* <EditableProTable
                    ghost
                    headerTitle="频道信息"
                    columns={columnsGgjc}
                    rowKey="id"
                    value={dataSourceGgjc}
                    onChange={setDataSourceGgjc}
                    recordCreatorProps={{
                        newRecordType: 'dataSource',
                        record: () => ({
                            id: Date.now(),
                        }),
                    }}
                    editable={{
                        type: 'multiple',
                        editableKeys: editableKeysGgjc,
                        actionRender: (row, config, defaultDoms) => {
                            return [defaultDoms.delete];
                        },
                        onValuesChange: (record, recordList) => {
                            setDataSourceGgjc(recordList);
                        },
                        onChange: setEditableRowKeysGgjc,
                    }}
                /> */}
                <ProFormList
                    name="dataGg"
                    actionRef={ggjcActionRef}
                    // creatorButtonProps={false}
                    // label={<div style={{ display: 'flex', justifyContent: 'space-between', width: '100vw' }}>
                    //     <span style={{ fontSize: 16 }}>记者信息</span>
                    //     <Button
                    //         type="primary"
                    //         style={{ display: 'flex', justifyContent: 'flex-end' }}
                    //         onClick={() => {
                    //             repoterActionRef.current?.add({
                    //                 name: '',
                    //             });
                    //         }}
                    //     >
                    //         添加记者信息
                    //     </Button>
                    // </div>}
                    label='记者信息'
                    creatorButtonProps={{
                        creatorButtonText: '添加采访对象',
                    }}
                    initialValue={[
                        {
                            name: '',
                        },
                    ]}
                >
                    <Card style={{ marginBottom: 5 }}>
                        <ProFormGroup key="group" >
                            <ProFormText name="channel" label="频道名称" placeholder="请输入频道名称" />
                            <ProFormDatePicker
                                name="date"
                                label="监测日期"
                                fieldProps={
                                    {
                                        showNow: false
                                    }
                                } />
                            <ProFormDigit
                                name="timeout"
                                label="商业广告超时时段（个）"
                            />
                            <ProFormDigit
                                name="shoppingAds"
                                label="违规播出广告（个）"
                            />
                            <ProFormDigit
                                name="medicalAds"
                                label="违规医药广告（个）"
                            />
                            <ProFormDigit
                                name="total"
                                label="合计"
                            />
                        </ProFormGroup>
                    </Card>
                </ProFormList>
            </Card>
            <Card title="视听新媒体监测" style={{ marginTop: 20 }}>
                <ProForm.Group >
                    <ProFormDigit
                        name="totalUnits"
                        label="持证单位总数"
                    />
                    <ProFormDigit
                        name="renewed"
                        label="需换证机构网站"
                    />
                    <ProFormText
                        name="transmissionStatus"
                        label="传输情况"
                    />
                    <ProFormText
                        name="violations"
                        label="违规内容"
                    />
                </ProForm.Group>
            </Card>
            <Card title="IPTV 频道监测" style={{ marginTop: 20 }}>
                <ProForm.Group >
                    <ProFormDigit
                        name="telecomChannels"
                        label="电信频道数"
                    />
                    <ProFormDigit
                        name="unicomChannels"
                        label="联通频道数"
                    />
                    <ProFormDigit
                        name="mobileChannels"
                        label="移动频道数"
                    />
                    <ProFormDigit
                        name="monitoredPrograms"
                        label="人工监看点播节目数"
                    />
                    <ProFormText
                        name="violationsFound"
                        label="违规内容"
                    />
                </ProForm.Group>
            </Card>

        </DrawerForm>
    );
};

export default AddAudioVisual;